<template>
    <div>
        <div v-show="ad==1">
        <el-form :model="InvoiceOpenInfo" label-width="100px" :inline="true" class="demo-form-inline">
            <el-form-item label="登记编号：">
                <el-input v-model="InvoiceOpenInfo.id" placeholder="登记编号"></el-input>
            </el-form-item>
            <el-form-item label="发票号码：">
                <el-input v-model="InvoiceOpenInfo.invoiceNo" placeholder="发票号码"></el-input>
            </el-form-item>
             <el-form-item label="发票金额：">
                 <el-col :span="11">
                     <el-input type="numder" placeholder="大于金额" v-model="InvoiceOpenInfo.invoiceAmount" style="width: 100%;"></el-input>
                 </el-col>
                 <el-col class="line" :span="2">-</el-col>
                 <el-col :span="11">
                     <el-input type="numder" placeholder="小于金额" v-model="InvoiceOpenInfo.accountBank" style="width: 100%;"></el-input>
                 </el-col>
            </el-form-item>
                <el-form-item label="项目名称：">
                    <el-input v-model="InvoiceOpenInfo.pname" @focus="pid"></el-input>
                </el-form-item>
             <el-form-item label="收票单位：">
                 <el-select v-model="InvoiceOpenInfo.receiveCompanyId" placeholder="收票单位">
                     <el-option value="" label="开票类型"></el-option>
                     <el-option
                             :key="receiveCompany.id"
                             v-for="receiveCompany in receiveCompanys"
                             :value="receiveCompany.id"
                             :label="receiveCompany.receiveCompanyName"
                     ></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="开票单位：">
                <el-select v-model="InvoiceOpenInfo.openCompanyId">
                    <el-option value="" label="收票类型"></el-option>
                    <el-option
                            :key="openCompany.id"
                            v-for="openCompany in openCompanys"
                            :value="openCompany.id"
                            :label="openCompany.openCompanyName"
                    ></el-option>

                </el-select>
            </el-form-item>
             <el-form-item label="填报人：">
                <el-input v-model="InvoiceOpenInfo.editer" placeholder="填报人"></el-input>
            </el-form-item>
            <el-form-item label="起止日期：">
                <el-col :span="11">
                    <el-input type="date" placeholder="选择日期" v-model="InvoiceOpenInfo.openDate" style="width: 100%;"></el-input>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-input type="date" placeholder="选择日期" v-model="InvoiceOpenInfo.invoiceType" style="width: 100%;"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="审批状态：">
                <el-select v-model="InvoiceOpenInfo.comment" placeholder="审批状态">
                    <el-option label="==全部==" value=""></el-option>
                    <el-option label="审批中" value="审批中"></el-option>
                    <el-option label="未提交" value="未提交"></el-option>
                    <el-option label="审批通过" value="审批通过"></el-option>
                    <el-option label="审批不通过" value="审批不通过"></el-option>
                    <el-option label="作废" value="作废"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getalls">查询</el-button>、
                <el-button @click="addOpen">新增</el-button>
                <el-button @click="exportExcel" type="primary">
                    <el-icon name="download" />导出为 Excel
                </el-button>
            </el-form-item>
            <el-input type="hidden" v-model="InvoiceOpenInfo.pId"></el-input>
        </el-form>
        <hr/>
        <el-table :data="InvoiceOpenInfos.slice((currentPage-1)*pagesize,currentPage*pagesize)" id="out-table" height="500" border style="width: 100%" >
            <el-table-column width="100"
                    label="操作">
                <template slot-scope="scope">
                    <el-popover  placement="top-start" trigger="hover">
                        <el-button size="mini" @click="getByidAll(scope.row)">详情</el-button>
                        <el-button size="mini" @click="getByid(scope.row)">修改</el-button>
                        <el-button size="mini" @click="delByid(scope)">删除</el-button>
                        <el-button size="mini" slot="reference">操作</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="开票登记号" width="180"> </el-table-column>
            <el-table-column prop="invoiceNo" label="发票号码" width="180"> </el-table-column>
            <el-table-column prop="invoiceType" label="发票类型"> </el-table-column>
            <el-table-column prop="invoiceAmount" label="发票金额"> </el-table-column>
            <el-table-column prop="cname" label="合同名称" :show-overflow-tooltip='true'> </el-table-column>
            <el-table-column prop="pname" label="项目名称" :show-overflow-tooltip='true'> </el-table-column>
            <el-table-column prop="rname" label="收款单位" :show-overflow-tooltip='true'> </el-table-column>
            <el-table-column prop="oname" label="开票单位" :show-overflow-tooltip='true'> </el-table-column>
            <el-table-column prop="editer" label="填报人"> </el-table-column>
            <el-table-column prop="openDate" label="日期"> </el-table-column>
            <el-table-column prop="comment" label="流程状态"> </el-table-column>
        </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="InvoiceOpenInfos.length">
            </el-pagination>
    </div>
    <InvoiceOpenInfoUpdate :InvoiceOpenInf="InvoiceOpenInf" :disabled="disableds" @AddOpenCompan="AddOpenCompan" :securitychecks="securitychecks" :ad="ad" @consle="consle" v-if="ad==2"></InvoiceOpenInfoUpdate>
        <!--所属项目子组件-->
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <project-info-list v-if="dialogVisible" @row="project"></project-info-list>
        </el-dialog>
    </div>
</template>

<script>
import {InvoiceOpenInfoSrvice} from "../../../model/gsl/InvoiceOpenInfoSrvice";
const  ion=InvoiceOpenInfoSrvice.getInstance();
import {OpenCompanySeriver} from "../../../model/gsl/OpenCompanySeriver";
const  open=OpenCompanySeriver.getInstance();
import {ReceiveCompanySeriver} from "../../../model/gsl/ReceiveCompanySeriver";
const  rece=ReceiveCompanySeriver.getInstance();
import InvoiceOpenInfoUpdate from "../../../components/gsl/InvoiceOpenInfo/InvoiceOpenInfoUpdate"
import XLSX from "xlsx";
import FileSaver from "file-saver";
import { AttachemenInfoService } from "../../../model/gs/AttachemenInfoService";
const attachemenInfoService = AttachemenInfoService.getInstance();
import ProjectInfoList from "../../common/projectInfo/ProjectInfoList";
export default {
        components:{InvoiceOpenInfoUpdate,ProjectInfoList},
        name: "InvoiceOpenInfolist",
        data() {
            return {
                currentPage:1, //初始页
                pagesize:10,    //    每页的数
                InvoiceOpenInfos: [],
                dialogVisible:false,
                InvoiceOpenInfo: {},
                InvoiceOpenInf:{},
                securitychecks:[],
                openCompanys: [],
                disableds:true,
                ad:1,
                receiveCompanys: [],
            }
        },
        created() {
            this.getalls();
            this.getopenCompany();
            this.getreceiveCompanys();
        },
        methods: {
            //开启隐藏项目子组件
            pid() {
                this.dialogVisible = true;
            },
            //响应项目组件
            project(row) {
                this.InvoiceOpenInfo.pname = row.projectName;
                this.InvoiceOpenInfo.pId = row.id; //获取所属项目id
                this.dialogVisible = false;
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            consle(a){
                this.ad=a;
            },
            exportExcel() {
                /* 从表生成工作簿对象 */
                var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                    bookType: "xlsx",
                    bookSST: true,
                    type: "array"
                });
                try {
                    FileSaver.saveAs(
                        //Blob 对象表示一个不可变、原始数据的类文件对象。
                        //Blob 表示的不一定是JavaScript原生格式的数据。
                        //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                        //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                        new Blob([wbout], {type: "application/octet-stream"}),
                        //设置导出文件名称
                        "sheetjs.xlsx"
                    );
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;

            },
            getByidAll(rowq){
                console.log(rowq)
                this.InvoiceOpenInf=rowq,
                    this.securitychecks=[]
                    attachemenInfoService.getById(this.InvoiceOpenInf.attachIds).then(re => {
                        // this.securitychecks = re.data.data;
                            re.data.data.forEach(item=>{
                            this.securitychecks.push({
                                fileName:item.fileName,
                                uploadPerson:this.InvoiceOpenInf.editer,
                                uploadDate:item.uploadDate,
                                filePath:item.filePath
                            })
                        })
                        this.disableds=true;
                        this.ad=2;
                    });
            },
            getByid(rowq){
                console.log(rowq)
                this.InvoiceOpenInf=rowq,
                    this.securitychecks=[]
                attachemenInfoService.getById(this.InvoiceOpenInf.attachIds).then(re => {
                    re.data.data.forEach(item=>{
                        this.securitychecks.push({
                            fileName:item.fileName,
                            uploadPerson:this.InvoiceOpenInf.editer,
                            uploadDate:item.uploadDate,
                            filePath:item.filePath
                        })
                    })
                    this.disableds=false;
                    this.ad=2;
                });
            },
            getopenCompany(){
                open.list(null).then((re)=>{
                    this.openCompanys=re.data.data;
                })
            },
            addOpen(){
                this.$router.push({ path: "/InvoiceOpenInfoAdd" });
            },
            getalls(){
                console.log(this.InvoiceOpenInfo)
                ion.list(this.InvoiceOpenInfo).then((re)=>{
                    this.InvoiceOpenInfo={};
                    this.InvoiceOpenInfos=re.data.data;
                })
            },
            getreceiveCompanys(){
                rece.list(null).then((re)=>{
                    this.receiveCompanys=re.data.data;
                })
            },
            delByid(a){
                ion.remove(a.row.id).then((re)=>{
                    if (re.data.data==1){
                        this.$message.success("删除成功!");
                        this.getalls();
                    } else {
                        this.$message.error("删除失败!");
                    }
                })
            },
            AddOpenCompan(InvoiceOpenIn){
                ion.update(InvoiceOpenIn).then((re)=>{
                    if (re.data.data==1){
                        this.$message.success("修改成功!");
                        this.ad=1;
                        this.getalls()
                    } else {
                        this.$message.error("修改失败!");
                    }
                })
            }

        }

    }
</script>

<style scoped>

</style>